<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">注册</h1>
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<form class="mui-input-group">
						    <div class="mui-input-row">
						        <input type="text" class="mui-input-clear" placeholder="请输入手机号">       
						    </div>
						    <div class="mui-input-row" id="verifyCodeBar">
						        <input type="text" class="mui-input-clear" placeholder="请输入验证码">
						    	<button type="button" class="mui-btn mui-btn-outlined" id="getVerifyCode">获取验证码</button>						        
						    </div>
						    <div class="mui-content-padded">
								<a href="#reg_next" type="button" class="mui-btn mui-btn-blue mui-btn-block">下一步</a>
							</div>
						</form>			
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<div id="reg_next" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">个人信息</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<form class="mui-input-group" id="input_alert">
						    <div class="mui-input-row">
						        <label>必填</label>
						        <input type="text" class="mui-input-clear" placeholder="请输入姓名">
						    </div>
						    <div class="mui-input-row">
						        <label>必填</label>
						        <input type="text" class="mui-input-clear" placeholder="输入身份证">
						    </div>
								
							<div class="mui-input-row mui-radio mui-left">
							    <label>男</label>
							    <input name="radio" type="radio" checked>
							    <label>女</label>
							    <input name="radio" type="radio" style="left: 100px;">
							</div>
						    <div class="mui-input-row">
						        <label>必填</label>
						        <input type="text" class="mui-input-clear" placeholder="请输入密码">
						    </div>
						    <div class="mui-input-row">
						        <label>必填</label>
						        <input type="text" class="mui-input-clear" placeholder="请确认密码">
						    </div>
						    <div class="mui-content-padded">
								<a href="#reg_success" type="button" class="mui-btn mui-btn-blue mui-btn-block">提交</a>
							</div>
						</form>	
					</div>
				</div>
			</div>
		</div>

		<div id="reg_success" class="mui-page feedback">			
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-btn mui-btn-grey mui-btn-outlined mui-pull-right" style="padding: 5px;color: #333;" id="login">登陆</button>
				<h1 class="mui-center mui-title">注册成功</h1>
			</div>
			<div class="mui-page-content">
				<div class="reg_success" style="text-align: center;padding-top: 20%;">
					<p><span class="mui-icon mui-icon-weixin" style="font-size: 100px;"></span></p>
					<p>姓名：守望先锋</p>
					<p>密码：1234567</p>
					<p>手机：1234567</p>
					<p>邮箱：1234567@qq.com</p>
					<p>身份证：1234567</p>
					<p>推荐码：123</p>
				</div>
			</div>
		</div>

	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/mui.view.js "></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if (viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);
		
		mui.ready(function () {
		   var loginBtn = document.getElementById("login");
		   loginBtn.addEventListener('tap',function(){
		   	 mui.openWindow('login.html','login.html',{})
		   });
		})
	</script>

</html>